<template>
  <div class="clock-thumb" @click="goClockDetail">{{ timeScale }}</div>
</template>

<script>
export default {
  name: 'ClockThumb',
  data () {
    return {
      timeID: null, // 定时器标识
      timeNow: null // 当前时间
    }
  },
  computed: {
    // 时间刻度
    timeScale () {
      return this.timeNow
        ? new Date(+this.timeNow + 8 * 3600 * 1000).toJSON().substring(11, 16)
        : ''
    }
  },
  methods: {
    // 更新当前时间
    updateTimeNow () {
      this.timeID = setInterval(() => {
        this.timeNow = new Date()
      }, 100)
    },

    // 跳转大时钟页
    goClockDetail () {
      this.$router.push({ name: 'clockSolar' })
    }
  },
  created () {
    // 实时更新当前时间
    this.updateTimeNow()
  },
  beforeDestory () {
    // 移除定时器
    clearInterval(this.timeID)
  }
}
</script>

<style lang="less">
.clock-thumb {
  position: absolute;
  bottom: 60px;
  left: 30px;
  font-size: 72px;
  color: #444444;
  text-shadow: 0 0 0.2em rgba(165, 6, 115, 0.792);
  cursor: pointer;
}
</style>
